<template>
  <div class="layout">
    <HeadTitle/>
    <div class="content">
      <!-- 聊天内容区 -->
      <div class="chat-content scrollbar">
        <div class="chat-content-top">
          <span class="chat-content-top-left">对话标题：{{ conversation?.title }}</span>
          <span class="chat-content-top-right">对话时间：{{ conversation.createAt }}</span>
          <!--          <span>{{ 'TODO:' + conversationID }}</span>-->
        </div>

        <MessageList :messages="filteredMessages"/>
      </div>
      <!--文本框区域-->
      <div class="main-input">
        <MessageInput v-model="inputValue"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeadTitle from "@/components/HeadTitle.vue";
import MessageInput from "@/components/MessageInput.vue";
import MessageList from "@/components/MessageList.vue"
import {ConversationMcokData, MessageMockData} from "@/dataMock";
import {ref, watch} from "vue";
import {useRoute} from "vue-router";
import {ConversationProps, MessageProps} from "@/type";

const route = useRoute();
const inputValue = ref("");
let conversationID = parseInt(route.params.id as string);
const conversation = ref<ConversationProps>()
conversation.value = ConversationMcokData.find(conversation => conversation.id === conversationID);
/**
 * NOTE
 * 如果
 */
const filteredMessages = ref<MessageProps[]>([])
// 首次打开渲染的列表
filteredMessages.value = MessageMockData.filter(
    msg => msg.conversationID === conversationID
)
// 监听路由变化
watch(() => route.params.id, (newId: string) => {
  conversationID = parseInt(newId);
  filteredMessages.value = MessageMockData.filter(
      msg => msg.conversationID === conversationID
  )
  conversation.value = ConversationMcokData.find(conversation => conversation.id === conversationID);

})
</script>

<style lang="scss" scoped>
.layout {
  @apply flex flex-col justify-end items-center;
  @include UN-ROUDN;

  .content {
    @apply w-full;

    .chat-content {
      @apply mb-5 border-2 p-5 overflow-y-auto;
      @include UN-ROUDN;
      background-color: $DF-COLOR;
      //TODO:高度处理
      height: calc(100vh - 150px - 180px);

      .chat-content-top {
        @apply flex justify-between h-9 items-center px-5 mb-5;
        @include UN-ROUDN;
        background-color: $primary;
        color: $SH-COLOR;

        &-left {
          @apply font-bold;
        }
      }
    }

    .main-input {
      @apply h-[150px] w-full border-2 flex items-center justify-center;
      @include UN-ROUDN;
      //   @include UN-SHAWOD;
      background-color: $DF-COLOR;
    }
  }
}
</style>
